<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <script type="text/javascript" src="./script/lib/html2canvas.min.js"></script>
</head>
<body>
<div id="container" style="width:600px;height:600px;"></div>
<script type="text/javascript">
    function getImageBase64 (img) {
        var canvas = document.createElement("canvas"); //创建canvas DOM元素，并设置其宽高和图片一样
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height); //使用画布画图
        var dataURL = canvas.toDataURL("image/jpeg"); //返回的是一串Base64编码的URL并指定格式

        
        document.body.appendChild(canvas);
        // canvas = null; //释放
        return dataURL;
    }

    function createImage (url, style, callback) {
        var image = document.createElement("img");
        image.src = url;
        image.style = style;
        image.onload = function () {
            var img = document.createElement("img");
            var base64Image = getImageBase64(image);
            img.src = base64Image;
            img.style = style;
            document.getElementById("container").appendChild(img);
            callback();
        };
    }

    createImage("./images/bg.jpg", "height:auto;width: 100%;", function () {
        createImage("./images/1.jpg", "position: absolute;z-index:1;width: 100px;height: auto;top:100px;left:100px;", function () {
            getSvg();
//            html2canvas(document.getElementById("container")).then(function (canvas) {
//                document.body.appendChild(canvas);
//            });
        });
    });

    function getSvg () {
        var divCotainer = document.getElementById("container");

        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        var foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
        svg.setAttributeNS(null, "width", divCotainer.offsetWidth);
        svg.setAttributeNS(null, "height", divCotainer.offsetWidth);
        foreignObject.setAttributeNS(null, "width", "100%");
        foreignObject.setAttributeNS(null, "height", "100%");
        foreignObject.setAttributeNS(null, "externalResourcesRequired", "true");
        foreignObject.innerHTML = divCotainer.innerHTML;
        svg.appendChild(foreignObject);

        var img = new Image();
        img.src = 'data:image/svg+xml,' + encodeURIComponent((new XMLSerializer).serializeToString(svg));
        img.onload = function() {
          
          let aLink = document.createElement('a');
          aLink.download = fileName;
          aLink.href = getImageBase64(img);
          let evt = document.createEvent("MouseEvents");
          evt.initEvent("click", false, false);
          aLink.dispatchEvent(evt);
          if (navigator.userAgent.indexOf('Firefox') >= 0)
              aLink.click();//FF的支持,可能不需要
        }
        document.body.appendChild(img);
        
        let fileName = "下载.jpeg";


    }
</script>
</body>
</html>
